import React from 'react'
import { Outlet, useLocation, useNavigate } from 'react-router-dom'
import './shou.scss'
import { Tabs } from 'react-vant'
import { Sticky } from 'react-vant';
export default function Shou() {
    let nav = useNavigate()
    const loc = useLocation()
    console.log(loc.pathname);
    let dli = [{ lu: '/yinmeng/home/follow', name: '关注' }, { lu: '/yinmeng/home/recommendation', name: '推荐' }, { lu: '/yinmeng/home/minivideo', name: '小视频' },]
    return (
        <div >
            <Sticky>
                <div className='top1'>
                    <div className='yin'>
                        音盟
                    </div>
                </div>
                <div className='dao'>
                    <div className='tab'>
                        <Tabs defaultActive={dli[1].lu} active={loc.pathname} onChange={(name) => { nav(name) }} color='gold'>
                            {dli.map((el, a) => (
                                <Tabs.TabPane key={a} title={`${el.name}`} name={el.lu} titleStyle={{ width: '150px' }}>
                                </Tabs.TabPane>
                            ))}
                        </Tabs>
                    </div>
                    <div className='tab-left'>
                        <div>
                            影视
                        </div>
                        <div>
                            综艺
                        </div>
                        <div>
                            娱乐
                        </div>
                    </div>
                </div>
            </Sticky>

            <div>
                <Outlet></Outlet>
            </div>
        </div>
    )
}
